<template>
  <a-modal
    :closable="true"
    :keyboard="true"
    :title="title"
    width="70%"
    v-model:visible="visible"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
  >
    <template #footer>
      <a-button key="enter" @click="close">
        关闭
      </a-button>
      <a-button type="primary" v-if="editable" @click="toEdit">
        编辑
      </a-button>
    </template>
    <a-spin :spinning="confirmLoading"  tip="Loading...">
      <!-- 查询区域 -->
      <div class="ui segment">
        <a-descriptions :title="infoName||subtitle" :size="size" bordered :column="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
          <template v-for="(v,k,i) in infos" :key="k" >
            <a-descriptions-item :label="v.label" :span="span(k)" v-if="!(k in myDict)">
               <span v-html="trans(k,v.value)"></span>
            </a-descriptions-item>
          </template>
        </a-descriptions>
        <br/>
        <a-descriptions :size="size" bordered  :column="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
          <a-descriptions-item label="备注" v-if="infos['memo']" :span="3">
            {{infos['memo'].value}}
            <br/>
          </a-descriptions-item>
          <a-descriptions-item label="创建人" v-if="infos['create_by']">
            {{infos['create_by'].value}}
          </a-descriptions-item>
          <a-descriptions-item label="创建时间" v-if="infos['create_time']" :span="2">
            <ClockCircleOutlined />
            {{infos['create_time'].value}}
          </a-descriptions-item>
          <a-descriptions-item label="最近修改人" v-if="infos['update_by']">
            {{infos['update_by'].value}}
          </a-descriptions-item>
          <a-descriptions-item label="最近修改时间" v-if="infos['update_time']" :span="2">
            <ClockCircleOutlined />
            {{infos['update_time'].value}}
          </a-descriptions-item>
        </a-descriptions>
        <br/>
        <!-- 可选表格区域 for related data-->
        <a-descriptions :title="detailTable.title" :size="size" v-if="detailTable && detailTable.columns">
          <a-descriptions-item bordered>
          <a-table
            ref="detailTable"
            size="small"
            bordered
            rowKey="id"
            :columns="detailTable.columns"
            :dataSource="detailTable.data"
          >
          </a-table>
          </a-descriptions-item>
        </a-descriptions>
      </div>
    </a-spin>
  </a-modal>
</template>

<script setup>
import { ref, reactive, toRefs, computed } from 'vue'
import _ from 'lodash'
import { values2Texts } from '@/utils/my.js'


// data
const { proxy } = getCurrentInstance();
const confirmLoading = ref(false)
const title = ref('详细信息')
const subtitle = ref('详细信息')
const record = ref({})
const detailTable = ref({})
const visible = ref(false)
const myDict = ref({
  memo: {title: "备注",type: 2},
  create_by: {title: "创建人",type: 2},
  create_time: {title: "创建时间",type: 4},
  update_by: {title: "最近修改人",type: 2},
  update_time: {title: "最近修改时间",type:4}
})

//// reactive+refs
const data = reactive({
  infos: {}
});
const { infos } = toRefs(data);
// props
const props = defineProps({
    size: {
      required: false, default: 'default'
    },
    footer: {
      required: false
    },
    editable: {
      required: false, default: true
    },
    paramNo: {
      required: false, default: 3
    },
    infoName: {
      required: false
    },
    columns: {
      type: Array,
      default: function(){
        return [];
      }
    },
    dictProperties: {
      type: Object,
      default: function(){
        return {};
      }
    },
    dictObj: {
      type: Object,
      default: function(){
        return {};
      }
    }
  })
// simple vars

// methods
function span(k) {
      // console.error("paramNo:", props.paramNo)
      // if (k === "fee_items") return 2;
      switch (props.paramNo){
        case 3: return 1;
        case 2: return 2;
        case 1: return 3;
      }
}
function trans(k,v){
      //对象再options下是数组，和对象下直接数组两种情况
      if(props.dictObj && props.dictObj[k]){
        return props.dictObj[k][v]
      } else if(props.dictProperties[k] ) {
        let options = props.dictProperties[k].options || props.dictProperties[k]
        //console.error(`k: ${k},v: ${v},options: ${JSON.stringify(options)}`)
        return values2Texts(v,options)
      } else {
        return v;
      }
}
function detail(data,exceptions,detailTable,title) {
      let {rec, orderArr} = data
      if (title) subtitle.value = title
      if (detailTable)
          detailTable.value = detailTable
      //支持从column上找label,或自定义dic中找
      // console.error("rec:", JSON.stringify(rec))
      let infos_tmp = {}
      orderArr.forEach((i) => {
          let column,label,type,multi;
          if (_.isArray(exceptions) && exceptions.indexOf(i) !== -1) return
          if (props.columns) {
              column = props.columns.find((c) => {
                  return c.dataIndex === i && !(c.is_show === 0)
              })
          }
          if (column){
              label = column.title;
              type = column.field_type
              multi = (column.dict_code && column.dict_code.split(";")[1])
          } else if (myDict.value[i]){
              label = myDict.value[i].title
              type = myDict.value[i].type
          }
          if (label){
            infos_tmp[i]={
                value: rec[i],
                label,
                type,
                multi
              }
          }
          // console.error(`column:${i}`, JSON.stringify(column))
      })
      // console.error("infos_tmp:", JSON.stringify(infos_tmp))
      // console.error("props.columns:", JSON.stringify(props.columns))
      infos.value = infos_tmp
      record.value = rec
      visible.value = true
}

const emit = defineEmits(['toEdit', 'close'])
const toEdit = () => {
  emit('toEdit', record.value);
};
const close = () => {
  visible.value = false;
  emit('close');
};

defineExpose({ detail })

</script>

<!--<style scoped>-->
<!--@import '@/assets/css/common.less';-->
<!--</style>-->
